<template>
  <div class="component-paging">
    <div class="table-bottom">
      <div class="bottom-left">
        <button>确定</button>
      </div>
      <div class="paging">
        <div class="paging-left">
          <p>
            共
            <span>{{total/pageSize}}</span> 页/
            <span>{{total}}</span> 条数据
          </p>
        </div>
        <el-pagination
          background
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "paging",
  data() {
    return {
      // 数据总条数
      total:500,
      // 每页显示数据的条数
      pageSize: 10,
      // 当前显示的页面页码
      currentPage: 1
    };
  },
  methods: {

  }
};
</script>

<style scoped>


</style>
